<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" type="image/ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
    <title>产品管理列表</title>
    <style type="text/css">
        /**# 自定义表单的高度**/
        .layui-table-cell{
            height:auto;
            line-height:28px;
        }
    </style>
</head>
<body class="layui-tab-content">
<div class="layui-card layui-card-body">
<div class="layui-form toolbar" id="queryTools">
    <div class="layui-form-item">
        <label class="layui-form-label">产品名称:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="name" placeholder="请填写名称">
        </div>
        <label class="layui-form-label">产品标签:</label>
        <div class="layui-input-inline">
            <select id="typeQuery" name="typeQuery">
            </select>
        </div>
        <label class="layui-form-label">发布时间:</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="date" class="layui-input" id="startDate" placeholder="请选择开始时间">
        </div>
        <div class="layui-input-inline">
            <input type="text" lay-verify="date" class="layui-input" id="endDate" placeholder="请选择结束时间">
        </div>
        <button class="layui-btn" id="btnSearch">查询</button>
        <button class="layui-btn" id="resetSearch">重置</button>
        <button class="layui-btn" id="btnAdd">新增</button>
    </div>
</div>
<table class="layui-hide" id="productTable" lay-filter="productTable"></table>
</div>
<!--新增修改界面-->
<form class="layui-form" id="editForm" lay-filter="editForm" style="display:none;padding-top:10px">
    <input type="hidden" name="productId">
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品名称</label>
        <div class="layui-input-block">
            <input type="text" name="productName" lay-verify="required|productName" autocomplete="off" placeholder="请输入产品名称"
                   class="layui-input layui-form-danger" style="width: 50%;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="请输入产品排序"
                   class="layui-input layui-form-danger" style="width: 50%;display: inline-block;" />
            <i class="layui-word-aux">数字越小，排序越靠前</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品显示</label>
        <div class="layui-input-inline" id="statusDiv">
            <!--<input type="checkbox" name="status" lay-skin="switch" lay-text="显示|不显示" value="1">-->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入产品简介" lay-verify="required|productMessage" class="layui-textarea" name="productMessage"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品规格</label>
        <div class="layui-input-block">
           <div style="border:1px solid #e6e6e6;width: 98%;">
               <!-- 尺码-->
               <div class="layui-form-item " id="productSize">
                   <label class="layui-form-label"><i class="layui-tip-required">*</i>尺码:</label>
                   <div class="layui-input-block" id="sizeItemDiv">
                       <div class="size-item">
                           <div class="layui-input-inline" style="width:100px;">
                               <input type="hidden"  class="layui-input">
                               <input type="text"  class="layui-input" lay-verify="required|nameLen">
                           </div>
                           <div class="layui-form-mid layui-word-aux del-size-item">删除</div>
                       </div>
                       <div class="size-item">
                           <div class="layui-input-inline" style="width:100px;">
                               <input type="hidden"  class="layui-input" >
                               <input type="text" class="layui-input" lay-verify="required|nameLen">
                           </div>
                           <div class="layui-form-mid layui-word-aux del-size-item">删除</div>
                       </div>
                       <div class="size-item">
                           <div class="layui-input-inline" style="width:100px;">
                               <input type="hidden"  class="layui-input">
                               <input type="text" class="layui-input" lay-verify="required|nameLen">
                           </div>
                           <div class="layui-form-mid layui-word-aux del-size-item">删除</div>
                       </div>
                       <div class="layui-form-mid layui-word-aux add-size-item">新增</div>
                   </div>
               </div>
               <!-- 颜色-->
               <div class="layui-form-item">
                   <label class="layui-form-label">颜色:</label>
                   <div class="layui-input-block" style="width:500px;">
                       <table class="layui-table" id="imgTable">
                           <colgroup>
                               <col width="180">
                               <col width="180">
                               <col width="150">
                           </colgroup>
                           <thead>
                               <tr>
                                   <th class="table-title"><i class="layui-tip-required">*</i>颜色名称</th>
                                   <th class="table-title">颜色图片</th>
                                   <th class="table-title">操作</th>
                               </tr>
                            </thead>
                               <tbody>
                               <tr>
                                   <td>
                                       <input type="hidden" class="layui-input">
                                       <input type="text" class="layui-input" lay-verify="required|nameLen">
                                   </td>
                                   <td>
                                       <div class="layui-form-mid layui-word-aux upload-img-item" id="uploadImg0">上传图片</div>
                                       <img class="upload-img-url">
                                   </td>
                                   <td>
                                       <div class="layui-form-mid layui-word-aux del-img-item" style="display: none;">删除</div>
                                       <div class="layui-form-mid layui-word-aux add-img-item">新增</div>
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       <input type="hidden" class="layui-input">
                                       <input type="text" class="layui-input" lay-verify="required|nameLen">
                                   </td>
                                   <td>
                                       <div class="layui-form-mid layui-word-aux upload-img-item" id="uploadImg1">上传图片</div>
                                       <img class="upload-img-url">
                                   </td>
                                   <td>
                                       <div class="layui-form-mid layui-word-aux del-img-item">删除</div>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </div>
               </div>
           </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品相册</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="photoUploadBtn">多图片上传</button>
            <div style="border:1px solid #e6e6e6;width: 98%;height:180px;">
                <div class="layui-upload-list" id="photoImgList">
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux">最多可上传5张图片，支持jpg,png,jpeg格式，建议上传大小为870px * 700px</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>产品标签</label>
        <div class="layui-input-block">
            <!--初始化标签-->
            <div class="layui-tag">
                <div class="layui-tag-content" id="initTags">
                </div>
                <div class="layui-tag-title ">
                    <div class="layui-btn layui-btn-xs" id="selTagAll" style="margin: 5px;">全选</div>
                    <div class="layui-btn layui-btn-xs" id="saveTags" style="margin: 5px;">确定</div>
                </div>
            </div>
            <div class="layui-tag" style="width: 200px;"></div>
            <!--产品选择标签-->
            <div class="layui-tag" style="top: 0px;position: absolute;">
                <div class="layui-tag-content" id="productTags">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购买链接</label>
        <div class="layui-input-block">
            <input type="text" name="link" lay-verify="proLink" autocomplete="off" placeholder="请输入购买链接"
                   class="layui-input layui-form-danger" style="width: 50%;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-tip-required">*</i>发布时间</label>
        <div class="layui-input-block">
            <input type="text" name="releaseTime" id="releaseTime" lay-verify="required|datetime" autocomplete="off" placeholder="请选择发布时间"
                   class="layui-input layui-form-danger" style="width: 50%;">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <button id="saveRecord" class="layui-btn" lay-submit lay-filter="editRecord">保存</button>
    </div>
</form>
<!--渲染列-->
<script type="text/html" id="statusClo">
    {{# if(d.status == 1){ }}
    正常
    {{# } else if(d.status ==3 ) { }}
    不显示
    {{# } else if(d.status ==2 ) { }}
    推荐
    {{# } }}
</script>
<!--渲染列-->
<script type="text/html" id="imgRender">
    {{# if(d.covenPhoto !=null && d.covenPhoto !="" ){ }}
    <div>
        <img src="{{ d.covenPhoto }}">
    </div>
    {{# } }}
</script>
<!--列操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" th:src="@{/js/plugins/jquery-1.11.3.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script type="text/javascript" th:src="@{/js/modules/product/list.js}"></script>
</body>
</html>